package com.laker.autotest.webui.testcase.canvas;

import com.laker.autotest.webui.core.BasePageTest;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.options.BoundingBox;
import lombok.extern.slf4j.Slf4j;
import org.testng.annotations.Test;

@Slf4j
public class CanvasDragTest extends BasePageTest {
    /**
     * <pre>
     *     基于边界框定位
     *     通过获取 canvas 元素的边界框（bounding box），确定其在页面中的位置和大小。若已知矩形在 canvas 内的大致位置，可根据边界框信息计算矩形的位置。
     *     若矩形在 canvas 内的位置不固定或难以通过简单相对位置确定，该方法会受限。
     *     相对定位示例
     *         // 假设矩形在 canvas 内的相对位置（比例）
     *                 double relativeX = 0.25;
     *                 double relativeY = 0.25;
     *                 double relativeWidth = 0.125;
     *                 double relativeHeight = 0.125;
     *
     *                 // 计算矩形的实际坐标和大小
     *                 double rectX = boundingBox.x + boundingBox.width * relativeX;
     *                 double rectY = boundingBox.y + boundingBox.height * relativeY;
     *                 double rectWidth = boundingBox.width * relativeWidth;
     *                 double rectHeight = boundingBox.height * relativeHeight;
     *
     *                 // 计算矩形中心位置
     *                 double centerX = rectX + rectWidth / 2;
     *                 double centerY = rectY + rectHeight / 2;
     *  </pre>
     */
    @Test(enabled = false)
    public void execute() {
        // 打开 canvas-drag.html 页面 "file:///" +
        page.navigate(System.getProperty("user.dir") + "/src/main/java/com/laker/autotest/testcase/web/canvas" + "/canvas-drag.html");
        // 等待 canvas 元素加载完成
        page.waitForSelector("canvas");
        // 获取 canvas 元素
        Locator canvas = page.locator("canvas");
        log.info("canvas: {}", canvas);
        // 获取 canvas 的边界框
        BoundingBox boundingBox = canvas.boundingBox();
        log.info("canvas boundingBox: {}", boundingBox);
        if (boundingBox != null) {
            // 假设矩形初始位置在 canvas 内的某个位置，这里简单模拟在 canvas 中心附近按下
            double startX = boundingBox.x + boundingBox.width / 2;
            double startY = boundingBox.y + boundingBox.height / 2;
            log.info("startX: {}, startY: {}", startX, startY);
            // 模拟鼠标按下
            page.mouse().move(startX, startY);
            page.mouse().down();
            // 模拟鼠标移动，这里移动 50 像素
            double endX = startX + 50;
            double endY = startY + 50;
            page.mouse().move(endX, endY);
            // 模拟鼠标释放
            page.mouse().up();
        }
        // 可以在这里添加断言来验证矩形是否移动到了预期位置
        // 获取矩形的新位置并进行断言
        // 断言矩形的新位置是否符合预期

    }

    // 基于像素颜色定位
    // 获取 canvas 的截图，遍历截图中的每个像素，通过对比像素颜色找到与矩形颜色匹配的像素，从而确定矩形的位置。
    // 这种方法比较耗时，适合于矩形颜色较为特殊的情况。 要矩形颜色与背景颜色有明显差异，就能较为准确地定位。
    /**
     *  // 获取 canvas 的截图
     *             byte[] screenshot = canvas.screenshot();
     *             Image image = Image.fromBytes(screenshot);
     *
     *             int width = image.getWidth();
     *             int height = image.getHeight();
     *
     *             // 假设矩形颜色为蓝色
     *             int targetColor = java.awt.Color.BLUE.getRGB();
     *
     *             int startX = -1;
     *             int startY = -1;
     *             int endX = -1;
     *             int endY = -1;
     *
     *             // 遍历像素查找矩形
     *             for (int y = 0; y < height; y++) {
     *                 for (int x = 0; x < width; x++) {
     *                     int pixelColor = image.getRGB(x, y);
     *                     if (pixelColor == targetColor) {
     *                         if (startX == -1) {
     *                             startX = x;
     *                             startY = y;
     *                         }
     *                         endX = x;
     *                         endY = y;
     *                     }
     *                 }
     *             }
     *
     *             if (startX != -1 && endX != -1) {
     *                 // 计算矩形中心位置
     *                 double centerX = (startX + endX) / 2.0;
     *                 double centerY = (startY + endY) / 2.0;
     */

    // 注入 JavaScript 脚本定位
    // 向页面注入 JavaScript 脚本，利用页面自身的逻辑获取矩形的位置信息。例如，若页面中有管理矩形位置的变量或函数，可通过脚本调用这些变量或函数来获取位置。
    // 需要了解页面的 JavaScript 实现细节，若页面逻辑复杂或频繁变化，脚本维护成本较高。
    /**
     *    // 假设页面有一个函数 getRectanglePosition 用于获取矩形位置
     *             String script = "() => { return window.getRectanglePosition(); }";
     *             Map<String, Object> result = page.evaluate(script);
     *
     *             double centerX = Double.parseDouble(result.get("centerX").toString());
     *             double centerY = Double.parseDouble(result.get("centerY").toString());
     */
}